<template>
  <div class="carousel-root">
    <div>
      <h1>效果预览</h1>
      <a-carousel autoplay>
        <div v-for="(item, index) in carList" :key="index">
          <a-image :src="item.caroImg" />
        </div>
      </a-carousel>
    </div>
    <div class="operation">
      <ul>
        <li v-for="(item, index) in carList" :key="index">
          <a-row :gutter="[24, 16]">
            <a-col :span="2">图片{{ index }}地址</a-col>
            <a-col :span="8"
              ><a-input v-model:value="item.caroImg"></a-input
            ></a-col>
            <a-col :span="2">商品编号</a-col>
            <a-col :span="6"
              ><a-input v-model:value="item.proId"></a-input
            ></a-col>
            <a-col :span="6"
              ><a-button
                type="primary"
                style="margin-right: 10px"
                @click="submit(index)"
                >发布</a-button
              ><a-button @click="getData">还原</a-button></a-col
            >
          </a-row>
        </li>
      </ul>
    </div>
    <div></div>
  </div>
</template>

<script>
import { message } from "ant-design-vue";
export default {
  data() {
    return {
      carList: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取数据
    getData() {
      this.$axios.get("common/carouse/all").then((res) => {
        if (res.data.code == 2000) {
          this.carList = res.data.data;
        } else {
        }
      });
    },

    //
    submit(index) {
      this.$axios
        .post("common/carouse/edit", {
          caroId: this.carList[index].caroId,
          caroImg: this.carList[index].caroImg,
          proId: this.carList[index].proId,
        })
        .then((res) => {
          if (res.data.code == 2000) {
            message.success("发布成功");
          } else {
            message.error("发布失败");
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
ul {
  list-style: none;
}
.carousel-root {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
/* For demo */
.ant-carousel ::v-deep(.slick-slide) {
  text-align: center;
  line-height: 160px;
  overflow: hidden;
}

.ant-carousel ::v-deep(.slick-slide h3) {
  color: #fff;
}

.operation {
  margin-top: 20px;
}
</style>